<template>
	<div id="cart">
		<van-nav-bar>
			<template #left>
			  <p>我的购物车</p>
			</template>
		  <template #right>
		    <p>管理</p>
		  </template>
		</van-nav-bar>
		<div v-show="active">
			<van-empty
			  class="custom-image"
			  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
			  description="在忙,也要选杯奶茶犒劳自己~~"
			><van-button round type="danger" class="bottom-button">去喝一杯</van-button>
			</van-empty>
		</div>
		<div v-show="!active">
			<div style="width: 100%; height: calc(100vh - 150px);overflow-y: auto;">
				<div class="group">
					<div class="shop">
						<van-icon name="shop" size="20" />
						<p class="shop_name">硕果时代购物中心店</p>
						<p class="modes">自取/外卖</p>
					</div>
					<div class="goodss_detail" v-for="i in goodss_list">
						<van-checkbox v-model="checked" icon-size="22" checked-color="#FF5809"></van-checkbox>
						<van-card
						  :price="i.price"
						  :desc="i.text"
						  :thumb="i.url"
						>
							<template #title>
								<h3 style="font-size: 0.35rem;">{{i.title}}</h3>
							</template>
							<template #num>
								<van-stepper v-model="value" />
							</template>
						</van-card>
					</div>
				</div>
			</div>
				<van-submit-bar :price="3300" button-text="去结算" @submit="onSubmit">
				  <van-checkbox v-model="checked" checked-color="#FF5809">全选</van-checkbox>
				</van-submit-bar>
		</div>
		<tabbar></tabbar>
	</div>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	export default {
		name: 'cart',
		data(){
			return{
				active:false,
				checked: true,
				value:1,
				goodss_list:[
					{
						url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3823543864,491798542&fm=26&gp=0.jpg',
						title: '奶香冰淇淋',
						text: '满口的奶香味，冰凉可口',
						price: "3.00"
					},
					{
						url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1711131000,2525767128&fm=26&gp=0.jpg',
						title: '大满贯奶茶',
						text: '椰果，红豆，布丁全加，超满足',
						price: "15.00"
					},
					{
						url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=945809014,259975443&fm=26&gp=0.jpg',
						title: '奥利奥圣代',
						text: '脆脆奥利奥，一起奥利给',
						price: '8.00'
					}
				]
			}
		},
		components:{
			tabbar
		},
		methods:{
			onSubmit(){
				
			}
		}
	}
</script>

<style scoped="scoped">
	#cart{
		background-color: F0F0F0;
		width: 100%;
		height: 100vh;
	}
	.van-empty{
		width: 100%;
		height: calc(100vh - 50px);
	}
	.bottom-button{
		width: 3.1333rem;
		height: 1.0333rem;
	}
	.van-nav-bar{
		background-color: #FF5809;
		color: white;
	}
	.group{
		width: 96%;
		margin: 0.2rem;
		padding: 0.2rem;
		background-color: white;
	}
	.shop{
		width: 100%;
		height: 0.6666rem;
		line-height: 0.6666rem;
	}
	.shop i{
		float: left;
		padding: 0.0666rem;
	}
	.shop_name{
		float: left;
		width: 2.4rem;
		white-space:nowrap;/* 文本不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.modes{
		margin-left: 0.1333rem;
		float: left;
		color: white;
		border: 0.0133rem solid #CC9966;
		height: 0.4666rem;
		line-height: 20px;
		margin-top: 3px;
		background: #cc9966;
	}
	.goodss_detail{
		width: 100%;
		height: 2.6666rem;
		display: flex;
	}
	.goodss_detail .van-checkbox{
		flex: 1;
		align-items:center;
		justify-content:center;
		display: -webkit-flex;
	}
	.goodss_detail .van-card{
		flex: 12;
		padding-left: 0;
	}
	.van-submit-bar{
		background-color: #F0F0F0;
		bottom: 1.2033rem;
	}
</style>
